<script setup>
const handleWithdraw = () => {
  uni.showModal({
    title: '同意登记',
  });
};
const NOhandleWithdraw = ()=>{
  uni.navigateTo({
    url:'/pages/Homepage/nopass'
  });
}
</script>

<template>
<view class="back">
  <view class="ts">
    <view class="title1">审批中可撤回重新登记</view>
  </view>
  <view class="form-container">
    <view class="form-item">
      <text class="label">留校原因<text class="required-mark">*</text></text>
      <text class="value">今年不回家</text>
    </view>
    <view class="form-item">
      <text class="label">计划留校开始时间<text class="required-mark">*</text></text>
      <text class="value">2024年1月2日 08:30:00</text>
    </view>
    <view class="form-item">
      <text class="label">计划留校结束时间<text class="required-mark">*</text></text>
      <text class="value">2024年1月25日 08:30:00</text>
    </view>
    <view class="form-item">
      <text class="label">家庭联系人姓名<text class="required-mark">*</text></text>
      <text class="value">张梅林</text>
    </view>
    <view class="form-item">
      <text class="label">家庭联系人电话<text class="required-mark">*</text></text>
      <text class="value">15567899900</text>
    </view>
    <view class="form-item">
      <text class="label">是否需要校内住宿<text class="required-mark">*</text></text>
      <text class="value">不需要</text>
    </view>
  </view>
  <view class="process-container">
    <view class="process-header">
      <text class="process-title">审批流程</text>
      <text class="collapse-btn">收起↑</text>
    </view>

    <view class="process-steps">
      <view class="step-item">
        <view class="step-dot dot-done"></view>
        <view class="step-content">
          <view class="step-avatar avatar-pink">张</view>
          <view class="step-info">
            <text class="step-role">发起人(学生)</text>
            <text class="step-name">张婉悠</text>
            <text class="step-status status-done">已发起</text>
          </view>
        </view>
      </view>
      <view class="step-item">
        <view class="step-dot dot-processing"></view>
        <view class="step-content">
          <view class="step-avatar avatar-purple">王</view>
          <view class="step-info">
            <text class="step-role">审批人(导师)</text>
            <text class="step-name">王小明</text>
            <text class="step-status status-processing">审批中</text>
          </view>
        </view>
      </view>
      <view class="step-item">
        <view class="step-dot dot-pending"></view>
        <view class="step-content">
          <view class="step-avatar avatar-orange">周</view>
          <view class="step-info">
            <text class="step-role">审批人(辅导员)</text>
            <text class="step-name">周一围</text>
            <text class="step-status status-pending">待审批</text>
          </view>
        </view>
      </view>
      <view class="step-item">
        <view class="step-dot dot-pending"></view>
        <view class="step-content">
          <view class="step-avatar avatar-purple">王</view>
          <view class="step-info">
            <text class="step-role">审批人(副书记/副院长)</text>
            <text class="step-name">王小明</text>
            <text class="step-status status-pending">待审批</text>
          </view>
        </view>
      </view>
    </view>
    <view class="btn-container">
      <button class="withdraw-btn" @click="handleWithdraw">同意登记</button>
      <button class="withdraw-btn" @click="NOhandleWithdraw">不同意登记</button>
    </view>
  </view>
</view>
</template>

<style scoped>

.form-container {
  background-color: #fff;
  margin: 0 12px;
  padding: 16px;
  margin-bottom: 12px;
}
.form-item {
  margin-bottom: 16px;
}
.dot-processing {
  background-color: #007aff;
}
.dot-pending {
  background-color: #e5e7eb;
}
.step-content {
  display: flex;
  align-items: flex-start;
}
.step-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  margin-right: 12px;
  flex-shrink: 0;
}
.avatar-pink {
  background-color: #ffcdd2;
}
.avatar-purple {
  background-color: #d1c4e9;
}
.avatar-orange {
  background-color: #ffe0b2;
}
.step-info {
  flex: 1;
}
.step-role {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}
.step-name {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
  display: block;
}
.step-status {
  font-size: 14px;
  margin-top: 4px;
  display: block;
}
.status-done {
  color: #00c853;
}
.status-processing {
  color: #007aff;
}
.status-pending {
  color: #ff7d00;
}

.btn-container {
  display: flow-root;
  justify-content: center;
  width: 100%;
}
.withdraw-btn {
  width: 100%;
  height: 44px;
  background-image: linear-gradient(90deg, #6CA9FF 0%, #166AFF 100%);

  color: #fff;
  font-size: 16px;
  border-radius: 8px;
  border: none;
  display: block;
  margin-bottom: 3px;

}
.label {
  font-size: 14px;
  color: #333;
  display: block;
  margin-bottom: 4px;
}
.required-mark {
  color: #ff5252;
  margin-left: 2px;
}
.value {
  font-size: 14px;
  color: #999;
}
.step-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e5e7eb;
  margin-right: 12px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.dot-done {
  background-color: #00c853;
}
.process-container {
  background-color: #fff;
  margin: 0 12px 12px 12px;
  padding: 16px;
}
.process-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.process-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.collapse-btn {
  font-size: 14px;
  color: #007aff;
}
.process-steps {
  position: relative;
  margin-bottom: 24px;
}
.process-steps::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #e5e7eb;
}
.step-item {
  display: flex;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.ts {
  width: 375px;
  height: 32px;
  background: #FFEEDD;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}
.title1 {
  height: 17px;
  font-weight: 400;
  font-size: 12px;
  color: #FF5F00;
  text-align: center;
  line-height: 17px;
  white-space: nowrap;
}
.withdraw-btn:active {
  background-color: #0066cc;
}
</style>